﻿@page "/Toast"

@inject IToastService ToastService

@using FluentUI.Demo.Shared.Pages.Toast.Examples
@using Microsoft.FluentUI.AspNetCore.Components

<h1>Toast</h1>

<p>
    Toasts, referred to as “notifications” in the UI, are pop-up notifications that keep users informed by briefly:
    <ul>
        <li>Confirming an action they took.</li>
        <li>Informing them about a timely event.</li>
        <li>Communicating the status of a process initiated.</li>
    </ul>
</p>
<p>
    The information in a toast is useful and relevant but never critical.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default Toast" Component="typeof(ToastDefault)"></DemoSection>

<DemoSection Title="Toast with options" Component="typeof(ToastDetailled)"></DemoSection>

<DemoSection Title="Confirmation Toasts" Component="typeof(ToastConfirmationToasts)"></DemoSection>

<DemoSection Title="Communication Toasts" Component="typeof(ToastCommunicationToasts)"></DemoSection>

<DemoSection Title="Progress Toasts" Component="typeof(ToastProgressToasts)"></DemoSection>

<DemoSection Title="Custom component" Component="typeof(ToastCustomComponent)"></DemoSection>

<DemoSection Title="Remove toasts" Component="typeof(ToastClearList)" ShowDownloads=false>
    <Description>
        Toasts can be removed by calling <code>ToastManager.Clear...()</code> methods. By default,
        toasts are removed from the queue as well. To keep toasts in the queue, pass <code>false</code> for the <code>includeQueue</code> parameter.
    </Description>
</DemoSection>

<DemoSection Title="Remove queued toasts" Component="typeof(ToastClearQueue)" ShowDownloads=false></DemoSection>

<h2 id="toastcontainer">Toast container</h2>

<strong>IMPORTANT!!</strong>
<p>
    Toasts are rendered through the <code>&lt;FluentToastContainer /&gt;</code> component. This component needs to be added to the main layout of your application/site.
    You typically do this in the <code>MainLayout.razor</code> file at the end of the <code>&lt;main&gt;</code> section like this:
</p>
<CodeSnippet>
    &lt;main&gt;
        &lt;nav&gt;
        :
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
            &lt;article id=&quot;article&quot;&gt;
                @@Body
            &lt;/article&gt;
        &lt;/div&gt;
        &lt;FluentToastContainer MaxToastCount=&quot;10&quot; /&gt;
    &lt;/main&gt;
</CodeSnippet>

<p>
    See the documentation below for more information about the <code>FluentToastContainer</code> parameters.
</p>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentToastProvider)" />

<ApiDocumentation Component="typeof(FluentToast)" />

